<template>
  <div class="product_selection">
    <div class="page_img"></div>
    <div class="header">
      <van-nav-bar class="nav_bar" title="审批" left-text="" left-arrow @click-left="handleBack" />
    </div>

    <div class="product_selection_header">
      <div style="" class="product_list_serch-text">
        <van-search class="product_list_serch1" placeholder="请输入商品名称" @search="onSearch" v-model="searchValue"
          shape="round" clearable>
          <template #left-icon>
            <div class="search_l_bt"></div>
          </template>
          <template #right-icon>
            <div class="search_r_bt" @click="onSearch">搜索</div>
          </template>
        </van-search>

      </div>
      <div class="product_selection_header_nav">
        <div class="nav_box">
          <div v-for="item in navList" :key="item.value"
            :class="{ nav_box_item: true, nav_box_item_active: item.value === queryParams.status }"
            @click="navClick(item.value)">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <DownArrowScreen v-model:value="queryParams" @onSubmit="onRefresh" />
    <div class="product_selection_list">
      <van-pull-refresh style="height: 100%;" v-model="refreshing" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
          <template v-slot:finished>
            <div class="nothing_div" v-if="list.length == 0">
              <van-image :src="nothingData"></van-image>
              <div class="nothing_font">暂无数据</div>
            </div>
          </template>
          <div class="product_list_van_list">
            <div v-for="item in list" :key="item.id">

              <ListItems :isTime="true" :row="item" :status="Number(queryParams.status)"
                @click="handleGetDetails(item)" />
              <div class="list_line"></div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script setup lang="ts" name="productSelection">
import { onMounted, ref, watch, onUnmounted, onActivated } from 'vue';
import DownArrowScreen from './components/downArrowScreenNewui.vue'
import { useRouter, useRoute } from 'vue-router'
import nothingData from '@/assets/porduct/icon_zanwushuju.png'
import { getAuditList } from '@/api/productList/index'
import ListItems from './components/listItemsNewui.vue'
const route = useRoute();
const router = useRouter();
const defaultPhoneHeight = ref(0) //屏幕默认高度
const nowPhoneHeight = ref(0) //屏幕现在的高度
const vantListScrollTop = ref<any>(0) // 列表滚动高度
const searchValue = ref("");
const navList = ref([{ name: '审批中', value: '0' }, { name: '已通过', value: '1' }, { name: '已驳回', value: '2' }])
const refreshing = ref(false);
// 此处定义了两个loading，loadingBox是针对页面加载进行定义的loading，loading是针对列表加载状态定义的loading，列表loading不能写在try中，不然会导致页面接口重复刷新
const loadingBox = ref(false)
const loading = ref(false);
const finished = ref(false);
const list = ref<any[]>([]);
const queryParams = ref<any>({
  pageNum: 1,
  pageSize: 10,
  styleName: '', // 商品名称
  status: '0', // 审批状态
  recruiterDeptId: '', // 招商部门id
  auditType: '', // 审批类型
  startTime: '', // 提交日期
});
// 限制连续刷新数据重复问题
const refreFlag = ref(true)

const emits = defineEmits(['doShow'])
// 在组件挂载完成后添加事件监听器
onMounted(() => {
  defaultPhoneHeight.value = window.innerHeight;
  // 添加事件监听器
  window.addEventListener('resize', handleResize);
  functionScroll('init')
  if (route.query.status) {
    queryParams.value.status = route.query.status
  }
})
// 处理窗口大小变化的函数
const handleResize = () => {
  nowPhoneHeight.value = window.innerHeight;
};
// 在组件卸载前移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  functionScroll('delete')
});
watch(nowPhoneHeight, () => {
  if (defaultPhoneHeight.value != nowPhoneHeight.value) {
    // 当软键盘弹出,改变bottomIsSHow变量然后去控制bottom的显示与隐藏
    emits('doShow', false)
  } else {
    // 相等代表软键盘收起后,与上同理
    emits('doShow', true)
  }
})

/** 查询商品列表 */
const getList = async () => {
  // 无合同审批
  try {
    var res = await getAuditList(queryParams.value);
    setTimeout(() => {
      refreFlag.value = true
      // 空数据 停止加载
      if (res.rows.length == 0) {
        list.value = [];
        finished.value = true;
        loading.value = false;
        loadingBox.value = false
        return;
      }
      // 有数据 赋值列表 加载状态结束
      res.rows.forEach((item) => {
        finished.value = false;
        list.value.push(item);
      });
      loading.value = false;
      loadingBox.value = false
      refreshing.value = false;
      // 如果list长度大于等于总数据条数，数据全部加载完成
      if (list.value.length >= res.total) {
        finished.value = true; //结束加载
      }
    }, 400);
  } catch (error) {
    loadingBox.value = false
  }
};
/** 加载更多 */
const onLoad = async () => {
  loadingBox.value = true
  getList();
  queryParams.value.pageNum++;
};
/** 下拉 */
const onRefresh = () => {
  if (refreFlag.value) {
    refreFlag.value = false
    finished.value = false; // 清空列表数据
    refreshing.value = false;
    loading.value = true; // 加载状态
    queryParams.value.pageNum = 1; // 分页数赋值为1
    list.value = []; // 清空数组
    onLoad(); // 重新加载数据
  } else {
    finished.value = false;
    refreshing.value = false;
  }
};

/** nav点击切换事件 */
const navClick = async (value: string) => {
  searchValue.value = ''
  queryParams.value.styleName = ''
  queryParams.value.status = value
  queryParams.value.recruiterDeptId = '' // 招商部门id
  queryParams.value.auditType = '' // 审批类型
  queryParams.value.startTime = '' // 提交日期
  onRefresh()
}
/** 跳转详情 */
const handleGetDetails = (row: any) => {
  router.push({
    path: '/approvalDetails',
    query: {
      id: row.id,
      status: queryParams.value.status
    }
  })
}

/** 根据商品名称搜索 */
const onSearch = () => {
  queryParams.value.styleName = searchValue.value
  onRefresh()
}

// 缓存组件中保存页面浏览位置方法
const functionScroll = (type: string) => {
  const dom: any = document.querySelector('.van-pull-refresh')
  if (type === 'init') {
    dom?.addEventListener('scroll', (e: any) => {
      vantListScrollTop.value = e.target.scrollTop
    })
  } else if (type === 'delete') {
    dom?.removeEventListener('scroll', () => { });
  } else if (type === 'black') {
    dom.scrollTop = vantListScrollTop.value
  }
}

/** 返回 */
const handleBack = () => {
  router.go(-1)
}

onActivated(() => {
  functionScroll('black')
})

</script>

<script lang="ts">
export default { name: 'productSelection' } 
</script>
<style lang="less" scoped>
.product_selection {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  background: url("@/assets/newui/productList/icon_shangpinbeijing@2x.png");
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-flow: column;
  position: relative;

  .page_img {
    background: url("@/assets/newui/productList/icon_shenpitu@2x.png");
    background-size: 100% 100%;
    position: absolute;
    width: 60px;
    height: 60px;
    top: 44px;
    right: 63px;

  }

  .header {
    filter: blur(0px);
    height: 90px;
    padding-top: 44px;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    z-index: 6003;

    :deep(.van-icon-arrow-left) {
      color: #1a1b1c !important;
    }

    :deep(.van-nav-bar__title) {
      color: #1a1b1c !important;
      font-size: 18px !important;
      font-weight: 600 !important;
    }

    :deep(.van-nav-bar) {
      background: none !important;

      &::after {
        display: none !important;
      }
    }

    :deep(.van-nav-bar__content) {
      background-color: transparent !important;
    }
  }

  .product_selection_header {
    width: 100%;
    box-sizing: border-box;

    :deep .van-search__field {
      background-color: #fff;
      border-radius: 20px;
    }

    .product_list_serch-text {
      display: flex;
      align-items: center;
      width: 100%;
      position: relative;
      box-sizing: border-box;
      padding: 0 15px;
    }

    .product_list_serch1 {
      display: flex;
      align-items: center;
      width: 100%;
      height: 34px;
      padding: 0px;
      box-sizing: border-box;
      overflow: hidden;
      background-color: #fff;
      border: 1px solid #0094ff;
      border-radius: 20px;

      :deep .van-search__content {
        height: 35px;
        background-color: #fff;
      }

      :deep .van-search__field {
        height: 35px;
      }

      :deep .van-field__clear {
        right: 0px !important;
      }

      .search_l_bt {
        width: 14px;
        height: 14px;
        background-image: url("@/assets/newui/productList/icon_sousuo@2x.png");
        background-size: 100% 100%;
      }

      .search_r_bt {
        width: 54px;
        height: 26px;
        background: linear-gradient(146deg, #0064ff 0%, #008fff 100%);
        border-radius: 14px;
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
        line-height: 26px;
        text-align: center;
        transform: translateX(5px);
      }
    }


    .product_selection_header_nav {
      width: 100%;
      padding: 0 32px;
      margin-top: 10px;
      box-sizing: border-box;

      .nav_box {
        width: 100%;
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 18px;
        padding: 2px;
        box-sizing: border-box;

        .nav_box_item {
          height: 31px;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 16px;
          font-weight: 400;
          font-size: 14px;
          color: #1A1B1C;
        }

        .nav_box_item_active {
          background: linear-gradient(270deg, #0064FF 0%, #008FFF 100%);
          font-weight: 500;
          color: #FFFFFF;
        }
      }
    }
  }

  .product_selection_list {
    flex: 1;
    min-height: 0;
  }

  :deep(.van-pull-refresh) {
    overflow: scroll;
  }
}

.list_line {
  height: 8px;
  background: #F6FAFF;
}
</style>
